{% extends "base.html" %}
{% block style %}
    <link href="/media/uploadify-new/uploadify.css" type="text/css" rel="stylesheet"/>

{% endblock %}
{% block title %}
    <title>{{ users.username }} article edit</title>
{% endblock %}
<body>
{% block detail %}
    <div class="main">
        <!-- 标题开始 -->
        <ul id="myTab" class="TabTitle">
            <li class="active" onclick="nTabs(this,0);" id="liText">text</li>
            <li class="normal" onclick="nTabs(this,1);" id="liLink">link</li>
        </ul>
        <!--标题结束-->
        <div class="TabContent">
            {% if message %}
                <div style="padding: 5px 10px;" id="errorDiv"><p
                        style="color: red;text-align: center;font-size: 15px"
                        id="error">{{ message|removetags:"ul li" }}</p></div>
            {% endif %}
            <form action="/editArticle/" method="post" id="textForm">{% csrf_token %}
                <div id="myTab_Content0" class="content11">
                    {% if article.imgs %}
                        <div class="tline"><img src="/media/image/{{ article.imgs }}" alt="" height="120" width="120">
                        </div>
                    {% endif %}
                    <div class="tline"><span class="tname">添加图片：</span>
                        <input id="file_upload_1" type="button">
                        {% comment %}<div><a href="javascript:$('#file_upload_1').uploadify('upload')">Upload Files</a></div>{% endcomment %}
                    </div>
                    <div class="tline" id="textTitleDiv"><span class="tname">标 题：</span>{{ form.title }}</div>

                    <div class="writeBox"><span class="tname">文章内容：</span>

                        <div class="article_Con"><a id="file_upload_2" href="#"></a>{{ form.content }} </div>
                    </div>
                    <div class="tline w130" id="textTypeDiv"><span class="tname">选择分类：</span>
                        {% if not boardName %}
                            {{ form.category }}
                        {% else %}
                            <input type="text" id="id_category" name="category" readonly="readonly"
                                   value="{{ boardName }}"/>
                        {% endif %}
                    </div>
                    {% if not boardName %}
                        <div class="sort">
                            {% if category %}
                                {% for ca in category %}
                                    <span> <a onclick="chooseCategory('textForm',this);"
                                              style="cursor: pointer;">{{ ca.name }}</a></span>
                                {% endfor %}
                            {% endif %}
                        </div>
                    {% endif %}
                    <input type="button" value="修改文章" class="aticleBtn" onclick="editTextArticle();"/>
                    <input type="button" value="预览" class="aticleBtn" onclick="previewArt('text');"/>
                </div>
                <input type="hidden" name="imgs" id="textImgs" value=""/>
                <input type="hidden" name="articleId" id="textArtId" value="{{ article.id }}"/>
            </form>
            <form action="/editArticle/" method="post" id="linkForm">{% csrf_token %}
                <div id="myTab_Content1" class="none">
                    {% if article.imgs %}
                        <div class="tline"><img src="/media/image/{{ article.imgs }}" alt="" height="120" width="120">
                        </div>
                    {% endif %}
                    <div class="tline"><span class="tname">添加图片：</span>
                        <input id="link_file_upload_1" type="button">
                        {% comment %}<div><a href="javascript:$('#file_upload_1').uploadify('upload')">Upload Files</a></div>{% endcomment %}
                    </div>
                    <div class="tline" id="linkTitleDiv"><span class="tname">标 题：</span>{{ form.title }}</div>
                    <div class="tline"><span class="tname">链 接：</span>{{ form.link }}</div>
                    <div class="tline"><span class="tname">视 频：</span>

                        {{ form.video }}<p>请输入"embed"格式的内容</p></div>
                    <div class="tline"><span class="tname">描 述：</span><input type="text" name="content" id="linkContent"
                                                                             value="{{ article.content }}"/>
                    </div>
                    <div class="tline w130" id="linkTypeDiv"><span class="tname">选择分类：</span>
                        {% if not boardName %}
                            {{ form.category }}
                        {% else %}
                            <input type="text" id="id_category" name="category" readonly="readonly"
                                   value="{{ boardName }}"/>
                        {% endif %}
                    </div>
                    {% if not boardName %}
                        <div class="sort">
                            {% if category %}
                                {% for ca in category %}
                                    <span> <a onclick="chooseCategory('linkForm',this);"
                                              style="cursor: pointer;">{{ ca.name }}</a></span>
                                {% endfor %}
                            {% endif %}
                        </div>
                    {% endif %}
                    <input type="button" value="修改文章" class="aticleBtn" onclick="editLinkArticle();"/>
                    <input type="button" value="预览" class="aticleBtn" onclick="previewArt('link');"/>
                    <input type="hidden" name="articleId" id="linkArtId" value="{{ article.id }}"/>
                    <input type="hidden" name="imgs" id="linkImgs" value=""/>
                </div>
            </form>
        </div>
    </div>
    <div style="display: none;">
        <form action="/articlePreview/" method="post" target="_blank" id="reviewForm">
            <input type="hidden" id="title" value="" name="title"/>
            <input type="hidden" id="content" value="" name="content"/>
            <input type="hidden" id="image" value="" name="image"/>
            <input type="hidden" id="type" value="" name="type"/>
            <input type="hidden" id="link" value="" name="link"/>
            <input type="hidden" id="contentType" value="" name="contentType"/>
        </form>
    </div>
{% endblock %}

</body>
{% block js %}
    <script type="text/javascript" src="/media/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="/media/js/textareas.js"></script>
    <script type="text/javascript" src="/media/uploadify-new/jquery.uploadify.min.js"></script>
    {% ifequal type 'text' %}
        <script type="text/javascript">
            $(function () {
                $("#liText").click();
            });
        </script>
    {% else %}
        <script type="text/javascript">
            $(function () {
                $("#liLink").click();
            });
        </script>
    {% endifequal %}
    <script type="text/javascript">
        function tabClick() {
            if ($(this).hasClass('activeTab'))
                return;
            $('.hd ul li').removeClass('activeTab');
            $(this).addClass('activeTab');
            var tabId = $(this).attr('tabId');
            $('#content > div').hide();
            $('#' + tabId).show();
        }
        $(document).ready(function () {
            $('.hd ul li').click(tabClick);

            //图片上传text
            $("#file_upload_1").uploadify({
                height: 30,
                css: 'addbtn',
                swf: '/media/uploadify-new/uploadify.swf',
                uploader: '/upload_script/',
                cancelImage: '/uploadify-new/uploadify-cancel.png',
                buttonClass: 'btn',
                buttonText: '选择文件',
                fileTypeExts: '*.jpg;*.gif',
                fileTypeDesc: '支持格式jpg/gif',
                multi: true,
                auto: true,
                width: 120,
                onUploadSuccess: function (file, data, response) {
                    var textImageObj = $("#textImgs");
                    textImageObj.val(data);
                }
            });

            $("#file_upload_2").uploadify({//文章添加图片， 不存数据库
                height: 30,
                swf: '/media/uploadify-new/uploadify.swf',
                uploader: '/upload_script/',
                cancelImage: '/uploadify-new/uploadify-cancel.png',
                buttonClass: 'addImg',
                buttonText: 'upload img',
                multi: true,
                auto: true,
                width: 120,
                onUploadSuccess: function (file, data, response) {
                    var imageHtm = "<img src='{{ url }}media/image/" + data + "'>";
                    //$("#link_fileDiv").html(imageHtm);
                    tinyMCE.execCommand('mceInsertContent', false, imageHtm);
                }
            });

            //图片上传link
            $("#link_file_upload_1").uploadify({
                height: 30,
                swf: '/media/uploadify-new/uploadify.swf',
                uploader: '/upload_script/',
                cancelImage: '/uploadify-new/uploadify-cancel.png',
                buttonClass: 'btn',
                buttonText: '选择文件',
                multi: true,
                auto: true,
                width: 120,
                onUploadSuccess: function (file, data, response) {
                    var linkImageObj = $("#linkImgs");
                    linkImageObj.val(data);
                }
            });
            setTimeout(hideMessage, 2000);
        });
        function hideMessage() {
            $("#errorDiv").hide(1000);
        }
        function editTextArticle() {
            var iframeObj = $(window.frames[0].document);
            var htmls = iframeObj.find("#tinymce").html();
            $("[name=content]").html(htmls);
            $("#textForm").submit();
        }
        function editLinkArticle() {
            var formObj = $("#linkForm");
            formObj.submit();
        }
        function chooseCategory(formName, obj) {
            var caInfo = $(obj).html();
            var formObj = $("#" + formName);
            $(formObj).find("[name=category]").val(caInfo);
        }
        function previewArt(name) {
            if (name == 'text') {
                $("#image").val($("#textImgs").val());
                $("#title").val($("#textTitleDiv input#id_title").val());
                $("#type").val($("#textTypeDiv input#id_category").val());
                $("#contentType").val('text');
                var tinymceObj = tinyMCE.getInstanceById("id_content");
                var content = tinymceObj.getContent();
                $("#content").val(content);
            } else if (name == 'link') {
                $("#image").val($("#linkImgs").val());
                $("#title").val($("#linkTitleDiv input#id_title").val());
                $("#type").val($("#linkTypeDiv input#id_category").val());
                $("#link").val($("#id_link").val());
                $("#content").val($("#linkContent").val());
                $("#contentType").val('link');
            }
            $("#reviewForm").submit();
        }
    </script>
{% endblock %}
</html>